/*
 * @Author: zheng
 * @Date: 2021-05-21 16点24分
 * @LastEditors: zheng
 * @LastEditTime: 2021-05-21 16点24分
 * @Description: 盒子模型样式，类名代替css样式
 * @FilePath: \cloudServiceStatic\src\styles\box.scss
 */

/* 盒子模型: Margin Padding Border
-------------------------- */
$box-max: 50; // 阈值
$box-step: 2;

$box-prop: ('p': 'padding', 'm': 'margin', 'b': 'border');
$box-direaction: ('t': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left');

/* 生成间隔为2的 .m-l-2 === margin-left: 2px; .m-l-4 === margin-left: 4px; ....
-------------------------- */
$i: $box-step;
@while $i <= $box-max {
  @each $key1, $prop1 in $box-direaction {
    @each $key2, $prop2 in $box-prop {
      // p-l-2
      .#{$key2}-#{$key1}-#{$i} {
        #{$prop2}-#{$prop1}: #{$i}px;
      }
      // p-2: 2px;
      .#{$key2}-#{$i} {
        #{$prop2}: #{$i}px;
      }
    }
  }
  $i: $i + $box-step;
}
